<%@ taglib uri="/WEB-INF/functions.tld" prefix="uf" %>
<input type="hidden" name="link" id="link" value="${feature.featureLink}"/>

<c:set var="insertSuccessFeature" value="Funcionalidade inserida com sucesso!"/>
<c:set var="insertErrorFeature" value="Ocorreu um erro na inser&ccedil;&atilde;o da funcionalidade"/>
<c:set var="editSuccessFeature" value="Funcionalidade editada com sucesso!"/>
<c:set var="editErrorFeature" value="Ocorreu um erro na edi&ccedil;&atilde;o da funcionalidade"/>

<div class="btnSpace">
	<button onclick="showContentFeature();" title="Adicionar novo perfil" class="skin_colour round_all" title="+ Adicionar Novo">
		<img width="24" height="24" src="contents/images/images/icons/small/white/Upload.png" alt="+ Adicionar novo">
	<span>+ Adicionar novo</span>
	</button>
</div>

<div class="box grid_16 round_all">
	<table class="display table"> 
		<thead> 
			<tr> 
				<th>Id</th>
				<th>Funcionalidade</th>
				<th>Link</th> 
				<th>Descri&ccedil;&atilde;o</th> 
				<th>Fun&ccedil;&otilde;es</th> 
			</tr> 
		</thead>
		<tbody>
			<c:forEach items="${uf:getFeatures()}" var="ftre">
				<c:if test="${ftre.featureId eq param.idFeature}">
					<c:set var="editFeature" value="${ftre}"/>
				</c:if>
				<tr class="gradeA">
					<td>${ftre.featureId}</td> 
					<td>${ftre.featureName}</td>
					<td>${ftre.featureLink}</td>  
					<td>${ftre.featureDescription}</td>
					<td class="center"">
						<c:set var="color" value="red"/>
						<c:set var="idFeature" value="${ftre.featureId}"/>
						<c:if test="${ftre.active}">
							<c:set var="color" value="green"/>
						</c:if>
						<input type="hidden" id="feature_${ftre.featureId}" value="${ftre.active}"/>
						<button id="featureStat_${ftre.featureId}" onclick="changeStatsFeature('${ftre.featureId}');" title="Clique para mudar o status" class="${color} skin_colour round_all btnKind">
							<img width="24" height="24" src="contents/images/images/icons/small/white/Facebook%20Like.png">
						</button>
						<button id="featureStat_${role.roleId}" onclick="editFeatureBtn('${ftre.featureId}');" title="Clique para editar" class="blue skin_colour round_all btnKind btnEdit">
							<img width="24" height="24" src="contents/images/images/icons/small/white/Pencil.png">
						</button>
					</td>
				</tr>
			</c:forEach>
		</tbody> 
	</table>
</div>

<input type="hidden" id="last_id_feature" name="last_id_feature" value="${idFeature + 1}"/>

<style type="text/css">
	.btnSpace {
		padding-left:10px;
	}
	.btnKind {
		margin-bottom:-8px;
		padding:4px 0 5px;
	}
	.btnEdit {
		margin: -19px 0 0 40px;
	}
	
	.black_overlay {
	    background-color: black;
	    height: 100%;
	    left: 0;
	    opacity: 0.7;
	    overflow: auto;
	    position: fixed;
	    top: 0;
	    width: 100%;
	    z-index: 1000;
	}
	
	.popSuccess{
		background: none repeat scroll 0 0 #F3F3F3;
		display: table;
	    border-radius: 5px 5px 5px 5px; 
	    border-top: 18px solid #4C5766; 
	    box-shadow: 0 0 6px #141414; 
	    left: 500px; 
	    padding-bottom: 20px; 
	    position: fixed; 
	    top: 200px; 
	    width: 430px; 
	    z-index: 1001;
	}
	
	.popSuccess p {
		margin: 25px 30px 5px 95px;
		font-size: 20px;
	}
	
	.popSuccess .fechar {
	    background: url("contents/images/ico-fechar.png") no-repeat scroll 0 0 transparent;
	    cursor: pointer;
	    height: 31px;
	    position: absolute;
	    right: -14px;
	    top: -33px;
	    width: 31px;
	    z-index: 1000;
	}
	
	.fechar {
	    background: url("contents/images/ico-fechar.png") no-repeat scroll 0 0 transparent;
	    cursor: pointer;
	    height: 31px;
	    position: absolute;
	    right: -14px;
	    top: -17px;
	    width: 31px;
	    z-index: 999;
	}
	

</style>

<script type="text/javascript">
	function fecharFeature() {
		$("#black_overlay_feature").hide("fade");
		$("#success_dialog_feature").hide("fade");
		$("#insertContentFeature").hide("fade");
	}
	
	function changeStatsFeature(featureId) {
		var status = $("#feature_" + featureId).val();

		var action = "ENABLE";
		
		if (status == 'true') {
			action = "DISABLE";
		}

		url = "Service-Features?type="+action+"&featureId=" + featureId;
		jQuery.get(url,function(data){
			data = trim(data);
			
			if (data == "SUCCESS") {
				if(action == 'ENABLE') {
					$("#featureStat_" + featureId).removeClass("red");
					$("#featureStat_" + featureId).addClass("green");
				} else {
					$("#featureStat_" + featureId).removeClass("green");
					$("#featureStat_" + featureId).addClass("red");
				}
				
				$("#feature_" + featureId).val(action == 'ENABLE');
			} else {
				$("#error").show("fade");
			}
		});
	};
	
	function showContentFeature() {
		$("#featureId").val($("#last_id_feature").val());
		$("#insertContentFeature").show("fade");
		$("#black_overlay_feature").show("fade");
	}
	
	function editFeatureBtn(idFeature) {
		var link = $("#link").val();
		window.location = "./"+ link +"?idFeature=" + idFeature;
	};
	
	function reload(param, value) {
		var link = $("#link").val();
		window.location = "./"+ link +"?"+ param + "=" + value;
	};
	
	function saveFeature() {
		url = "Service-Features?type=INSERT&feature=";
		callServiceFeature(url, 'insert');
	};
	
	function editFeature() {
		url = "Service-Features?type=UPDATE&feature=";
		callServiceFeature(url, 'edit');
	};
	
	function callServiceFeature(url, value) {
		var featureForm = document.featureForm;
		var checks = featureForm.functions;
		var lista = new Array();
		for(var i = 0; i < checks.length; i++) {
			var func = new Function();
			if(checks[i].checked){
				func.setName(checks[i].value);
				lista.push(func);
				hasChecked = true;
			}
		}
		
		var featureActive = $("#featureActive").val();
		var featureId = $("#featureId").val();
		var featureName = $("#featureName").val();
		var featureDescription = $("#featureDescription").val();
		var featureLink = $("#featureLink").val();
			
		if(featureName == '' || featureDescription == '' || featureLink == '' || lista.length == 0) {
			$("#feature_error_div").html("Preencha todos os campos!");
			$("#feature_error").show();
			return false;
		}
		
		var feature = new Feature();
		
		if (featureActive != null) {
			feature.setActive(featureActive != '' && featureActive == 'true' ? true : false);
		}
		if (featureId != '') {
			feature.setFeatureId(featureId);
		}
		feature.setFeatureName(featureName);
		feature.setFeatureLink(featureLink);
		feature.setFeatureDescription(featureDescription);
		feature.setFunctions(lista);
		feature = JSON.stringify(feature);
		
		url = url + feature;

		jQuery.get(url,function(data){
			data = trim(data);
			
			if (data == "SUCCESS") {
				featureForm.reset();
				reload('success_feature', value);
			} else {
				reload('error_feature', value);
			}
		});
	};
	
	function Function(featureId) {
		var name;
		
		this.setName=function(name) {
			this.name = name;
		};
		
		this.getName=function() {
			return this.name;
		};
	};	
	
	function Feature() {
		
		var active;
		var featureId;
		var featureName;
		var featureLink;
		var featureDescription;
		var functions;
		
		function Feature() {
		};
		
		this.getActive = function() {
			return this.active;
		};
		
		this.getFeatureId = function() {
			return this.featureId;
		};
		
		this.getFeatureName = function() {
			return this.featureName;
		};
		
		this.getFeatureLink = function() {
			return this.featureLink;
		};
		
		this.getFeatureDescription = function() {
			return this.featureDescription;
		};
		
		this.getFunctions = function() {
			return this.functions;
		};	
		
		this.setActive=function(active) {
			this.active = active;
		};
		
		this.setFeatureId=function(featureId) {
			this.featureId = featureId;
		};
		
		this.setFeatureName=function(featureName) {
			this.featureName = featureName;
		};
		
		this.setFeatureDescription =function(featureDescription) {
			this.featureDescription =  featureDescription;
		};
		
		this.setFunctions =function(functions) {
			this.functions =  functions;
		};
		
		this.setFeatureLink = function(featureLink) {
			this.featureLink = featureLink;
		};
		
	};
</script>
<c:set var="insert" value="${param.success_feature eq null or param.success eq '' ? false : true}"/>

<div style="display: ${insert or not empty editFeature ? 'block' : 'none'};" onclick="fecharFeature();" id="black_overlay_feature" class="black_overlay"></div>
<div style="display: ${insert ? 'block' : 'none'};" id="success_dialog_feature" class="popSuccess">
	<div onclick="fecharFeature('1');" href="javascript:void(0);" class="fechar"></div>
	<p>${param.success_feature eq 'insert' ? insertSuccessFeature : editSuccessFeature}</p>
</div>

<div id="insertContentFeature" class="box grid_8 round_all" style="display:${not empty editFeature ? 'block' : 'none'};position:fixed; left:30%; top:100px;z-index:1000;">
	<h2 class="box_head grad_colour">Funcionalidades</h2>
	<div onclick="fecharFeature('1');" href="javascript:void(0);" class="fechar"></div>
	<div class="toggle_container">
		<div class="block">
			<form name="featureForm" id="featureForm" action="" method="POST">
				<input id="featureActive" disabled name="featureActive" type="hidden" class="small" value="${editFeature.active}"/>
				
				<label>Id:</label>
				<input title="Feature Id" id="featureId" disabled name="featureId" type="text" class="small" value="${editFeature.featureId}"/> 
				
				<label>link:</label>
				<input title="Give the feature name" id="featureLink" name="featureLink" type="text" class="medium" value="${editFeature.featureLink}"/> 
								
				<label>Nome:</label>
				<input title="Give the feature name" id="featureName" name="featureName" type="text" class="large" value="${editFeature.featureName}"/> 

				<label>Descri&ccedil;&atilde;o:</label>
				<input title="Give the feature description" id="featureDescription" name="featureDescription" type="text" class="large" value="${editFeature.featureDescription}"/>
				
				<label>Fun&ccedil;&atilde;o:</label>
				<div class="input_group">
					<div class="checker"><span><input type="checkbox" ${uf:containsFunction(editFeature.functions,'manter_perfis') ? 'checked=yes' : ''} id="functions" name="functions" value="manter_perfis" style="opacity: 0;"></span></div>Manter Perfis<br>
					<div class="checker"><span><input type="checkbox" ${uf:containsFunction(editFeature.functions,'manter_func') ? 'checked=yes' : ''} id="functions" name="functions" value="manter_func" style="opacity: 0;"></span></div>Manter Funcionalidades<br>
					<div class="checker"><span><input type="checkbox" ${uf:containsFunction(editFeature.functions,'manter_usuarios') ? 'checked=yes' : ''} id="functions" name="functions" value="manter_usuarios" style="opacity: 0;"></span></div>Manter Usuarios<br>
					<div class="checker"><span><input type="checkbox" ${uf:containsFunction(editFeature.functions,'mapas') ? 'checked=yes' : ''} id="functions" name="functions" value="mapas" style="opacity: 0;"></span></div>Vizualiza&ccedil;&atilde;o de Mapa<br>
					<div class="checker"><span><input type="checkbox" ${uf:containsFunction(editFeature.functions,'meus_sorteios') ? 'checked=yes' : ''} id="functions" name="functions" value="meus_sorteios" style="opacity: 0;"></span></div>Meus Sorteios<br>
					<div class="checker"><span><input type="checkbox" ${uf:containsFunction(editFeature.functions,'meus_grupos') ? 'checked=yes' : ''} id="functions" name="functions" value="meus_grupos" style="opacity: 0;"></span></div>Meus Grupos<br>
					<div class="checker"><span><input type="checkbox" ${uf:containsFunction(editFeature.functions,'minhas_promocoes') ? 'checked=yes' : ''} id="functions" name="functions" value="minhas_promocoes" style="opacity: 0;"></span></div>Minhas Promo&ccedil;&otilde;es<br>
				</div>
				<button type="button" class="button_colour round_all" onClick="${not empty editFeature ? 'editFeature();' : 'saveFeature();'}"><img height="24" width="24" alt="Bended Arrow Right" src="contents/images/images/icons/small/white/Bended%20Arrow%20Right.png"><span>Save</span></button>
				<br/><br/>
				<div id="feature_error" name="feature_error" class="alert alert_red" style="display: none">
					<img width="24" height="24" src="contents/images/images/icons/small/white/Alert%202.png">
					<strong id="feature_error_div">${param.error_feature eq 'insert' ? insertErrorFeature : editErrorFeature}</strong>
				</div>
			</form>
		</div>
	</div>
</div>